<script setup>
//引入公共组件
import CommonView from "./CommonView.vue"
import { useRoute } from "vue-router";
import { onMounted } from "vue";

import { useWeatherStore } from "@/stores/weather";
import { storeToRefs } from "pinia";

const { weather_base, isAdd, } = storeToRefs(useWeatherStore())

const { targetCityInterfaceloads } = useWeatherStore()
const route = useRoute()

//组件挂载
onMounted(() => {
  const name = route.params.cityname
  //调用路由传来的城市名
  targetCityInterfaceloads(name)

})
</script>

<template>
  <CommonView>
    <template #default>
      <div class="sv">
        <div class="title">
          <span>你正在预览{{ weather_base.city }}的天气信息</span>
          <span v-if="!isAdd">，可以通过右上角的"+"号按钮保存起来</span>
        </div>
        <div class="text">
          <span>当日气温是：{{ weather_base.temperature }}摄氏度</span>
          <span>当日天气是：{{ weather_base.weather }}</span>
          <span>当日风向是：{{ weather_base.winddirection }}风</span>
          <span>当日风力是：{{ weather_base.windpower }}级</span>
        </div>
      </div>
    </template>
  </CommonView>
</template>

<style lang="scss" scoped>
.sv {
  .title {
    padding: 8px;
    text-align: center;
    line-height: 24px;
    background: #004e71;
  }

  .text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 24px 0;
    text-align: center;
    line-height: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}
</style>